import React from "react";
import styles from "./NavPopover.module.css";
import PopoverContent from "./PopoverContent";

interface NavPopoverProps {
  data: {
    searchPlaceholder: string;
    images: Array<{
      src: string;
      text: string;
    }>;
    categories: Array<{
      title: string;
      items: string[];
    }>;
  };
  visible: boolean;
  position: { x: number; y: number };
  onMouseEnter?: () => void;
  onMouseLeave?: () => void;
}

const NavPopover: React.FC<NavPopoverProps> = ({
  data,
  visible,
  position,
  onMouseEnter,
  onMouseLeave,
}) => {
  if (!visible) return null;

  return (
    <div
      className={styles.popover}
      style={{
        left: position.x - 270, // 居中显示
        top: position.y + 10,
      }}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      <div className={styles.arrow} />
      <div className={styles.content}>
        <PopoverContent data={data} />
      </div>
    </div>
  );
};

export default NavPopover;